<template>
    <section class="global-notice" v-if="isShow">
        <span class="tag">通知</span>
        <span style="flex: 1;padding: 0 15px;">{{ notice.noticeText }}</span>
        <i class="el-icon-close" @click="enable"></i>
    </section>
</template>
<script>
export default {
    name: 'global-notice',
    computed: {
        notice() {
            return this.$store.getters['notice/notice'];
        },
        isShow() {
            return this.notice.isEnable && this.notice.noticeText;
        }
    },
    created() {
        this.$store.dispatch('notice/read');
    },
    methods: {
        enable() {
            this.$store.dispatch('notice/read', {
                data: {
                    isEnable: false
                }
            });
        }
    }
};
</script>
<style lang="postcss" scoped>
.global-notice {
    height: 45px;
    background-color: rgba(64, 158, 255, 0.1);
    color: #409eff;
    padding: 0 45px;
    display: flex;
    font-size: 12px;
    align-items: center;
    .tag {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 26px;
        padding: 0 10px;
        border-radius: 4px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #fff;
        background-color: #409eff;
        border: 1px solid rgba(64, 158, 255, 0.2);
        border-color: rgba(103, 194, 58, 0.2);
        white-space: nowrap;
    }
}
</style>
